<template>
  <div class="link-container">
    <el-card class="box-card">
      <el-row style="margin: 10px">
        <el-col :span="24">
          <el-button type="primary" size="small" icon="el-icon-plus" @click="addClick"
            >添加</el-button
          >
          <el-button
            type="danger"
            size="small"
            icon="el-icon-delete"
            @click="deleteClick"
            >批量删除</el-button
          >
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table
        :data="linkList"
        style="width: 100%"
        border 
        @selection-change="setSelectRows"
      >
        <el-table-column type="selection" width="45"> </el-table-column>
        <el-table-column prop="name" label="名称" width="140" align="center">
        </el-table-column>
        <el-table-column label="LOGO" width="100" align="center">
          <template v-slot="slot">
            <el-image :preview-src-list="[slot.row.pic]" :src="slot.row.pic">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="🔗 链接地址" align="center">
          <template v-slot="slot">
            <el-link :underline="false" :href="slot.row.url" target="_blank">{{
              slot.row.url
            }}</el-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="sort"
          label="排序"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column label="展示" width="130" align="center">
          <template v-slot="slot">
            <el-switch v-model="slot.row.stutas" @change="disable(slot.row)">
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column prop="address" label="操作" width="230" align="center">
          <template v-slot="slot">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="small"
              @click="editClick(slot.row.id)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="small"
              @click="deleteClick(slot.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="queryInfo.pageNum"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 编辑抽屉 -->
      <el-drawer
        title="编辑友情链接"
        :visible.sync="editdrawer"
        :direction="direction"
        :before-close="handleClose"
        close-on-press-escape
        @close="close"
      >
        <el-form
          :label-position="labelPosition"
          label-width="70px"
          :model="editLinkform"
          size="small"
        >
          <el-form-item label="名称">
            <el-input v-model="editLinkform.name"></el-input>
          </el-form-item>
          <el-form-item label="LOGO">
            <el-image
              v-if="editLinkform.pic"
              style="width: 100px; "
              :src="editLinkform.pic"
              fit="contain"></el-image>
           
              <el-row><el-button size="small" style="margin-left:20px;">点击上传</el-button> </el-row>
            <!-- <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="1"
              :on-exceed="handleExceed"
              :file-list="fileList"
            >
              <el-button size="small" >点击上传</el-button>
            </el-upload> -->
          
          </el-form-item>
          <el-form-item label="链接地址">
            <el-input v-model="editLinkform.url"></el-input>
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="排序">
            <el-input v-model="editLinkform.sort"></el-input>
          </el-form-item>
            </el-col>
           <el-col :span="12">
            <el-form-item label="状态">
            <el-switch v-model="editLinkform.stutas"> </el-switch>
          </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
           <el-button size="small" type="primary" @click="editLink">修改</el-button>
             <el-button size="small" type="primary" @click="close">重置</el-button>
          </el-form-item>
            
        </el-form>
      </el-drawer>
      <!-- 添加抽屉 -->
        <el-drawer
        title="添加友情链接"
        :visible.sync="adddrawer"
        :direction="direction"
        :before-close="handleClose"
        close-on-press-escape
        @close="close"
      >
        <el-form
          :label-position="labelPosition"
          label-width="70px"
          :model="addLinkform"
          size="small"
        >
          <el-form-item label="名称">
            <el-input v-model="addLinkform.name"></el-input>
          </el-form-item>
          <el-form-item label="LOGO">
            <el-image
              v-if="addLinkform.pic"
              style="width: 100px; "
              :src="addLinkform.pic"
              fit="contain"></el-image>
           
              <el-row><el-button size="small" style="margin-left:20px;">点击上传</el-button> </el-row>
            <!-- <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="1"
              :on-exceed="handleExceed"
              :file-list="fileList"
            >
              <el-button size="small" >点击上传</el-button>
            </el-upload> -->
          
          </el-form-item>
          <el-form-item label="链接地址">
            <el-input v-model="addLinkform.url"></el-input>
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="排序">
            <el-input v-model="addLinkform.sort"></el-input>
          </el-form-item>
            </el-col>
           <el-col :span="12">
            <el-form-item label="状态">
            <el-switch v-model="addLinkform.stutas"> </el-switch>
          </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
           <el-button size="small" type="primary" @click="addtLink">添加</el-button>
             <el-button size="small" type="primary" @click="close">重置</el-button>
          </el-form-item>
            
        </el-form>
      </el-drawer>
    </el-card>
  </div>
</template>

<script>
import { getLinkList, deleteLink, editLink ,getLinkId,addLink} from "@/api/link";

export default {
  name: "Link",
  data() {
    return {
      pageNum:10,
      editLinkform: {}, // 编辑的数据
      addLinkform:{
         name: '',
        pic: 'https://qiye.aliyun.com/attachment/download_docstore?fileID=b84a2fd7-efb6-4e21-8596-c2917222ee16',
        url: 'http://',
        sort: 0,
        stutas: false,
      }, // 添加的数据
      linkList: [], // 表格数据
      queryInfo:{
        pageNum: 1, // 分页页码
        pageSize: 10, // 页面数据条数
      },
      adddrawer:false,
      total: 0, //总数据
      selectRows: "", // 全选数据
      editdrawer: false, //编辑抽屉显示of隐藏
      direction: "rtl",
      labelPosition: "left",//改变表单域标签的位置
    };
  },
  created() {
    this.getLinkList();
  },
  methods: {
    // 关闭抽屉就清空
    close(){
      this.editLinkform = {}
      this.addLinkform={
        name: '',
        pic: 'https://qiye.aliyun.com/attachment/download_docstore?fileID=b84a2fd7-efb6-4e21-8596-c2917222ee16',
        url: 'http://',
        sort: 0,
        stutas: false,
      }
    },
    // 点击添加按钮弹出抽屉
    addClick(){
      this.adddrawer = !this.adddrawer;
    },
    // 确认添加按钮
    async addtLink(){
      // const body = this.addLinkform
     const res =  await addLink(this.addLinkform)
     console.log(res);
      this.$message.success('添加成功')
      this.adddrawer = !this.adddrawer;
      this.getLinkList();
    },
     // 编辑弹出抽屉
   async editClick(id) {
       // 2发请求 把得到的数据赋值给data
      const res = await getLinkId(id)
      this.editLinkform = res
       // 1，弹出抽屉
      this.editdrawer = !this.editdrawer;
    },
    // 确认修改按钮
    async editLink(){
      const id =this.editLinkform.id
      const body = { 
        name: this.editLinkform.name,
        pic: this.editLinkform.pic,
        url: this.editLinkform.url,
        sort: this.editLinkform.sort,
        stutas: this.editLinkform.stutas,
      }
      await editLink(id,body)
      this.editdrawer = !this.editdrawer;
      this.getLinkList()
      this.$message.success('修改成功')

    },
    // 滑块功能
    async disable(row) {
      const { id, stutas } = row;
      const res = await editLink(id, { stutas: stutas });
      this.$message.success(`${stutas ? "已展示" : "取消展示"}`);
    },
    // 数据
    async getLinkList() {
      const { list, pageNum, pageSize, total } = await getLinkList(
        this.queryInfo
      );
      this.queryInfo.pageNum = Number(pageNum);
      this.queryInfo.pageSize = Number(pageSize);
      this.total = total;
      this.linkList = list;
    },
    // 设置页面数据条数
    handleSizeChange(val) {
      this.queryInfo.pageSize = val;
      this.getLinkList();
    },
    // 设置分页页码
    handleCurrentChange(val) {
      this.queryInfo.pageNum = val;
      this.getLinkList();
    },
    // 删除用户 or 批量删除
    deleteClick(row) {
      if (row.id) {
        this.$confirm("你确定要删除选中项吗", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            await deleteLink({ ids: [row.id] });
            this.getLinkList();
            this.$message.success("删除成功");
          })
          .catch(() => {
            this.$message.info("已取消删除");
          });
      } else {
        // 批量删除
        if (!this.selectRows.length)
          return this.$message.warning("请选择要删除的选中项");
        const ids = this.selectRows.map((item) => item.id);
        console.log("ids", ids);

        this.$confirm("你确定要删除选中项吗", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            await deleteLink({ ids });
            this.getLinkList();
            this.$message.success("删除成功");
          })
          .catch(() => {
            this.$message.info("已取消删除");
          });
      }
    },
    // 全选数据
    setSelectRows(val) {
      this.selectRows = val;
    },
    // 关闭抽屉提示
    handleClose(done) {
      done();
      // this.$confirm("确认关闭？")
      //   .then((_) => {
      //     done();
      //   })
      //   .catch((_) => {});
    },
  },
};
</script>

<style lang="scss">
.box-card {
  margin: 20px;
  
}
.el-table {
  margin-bottom: 20px;
}
.el-image {
  border-radius: 5px;
}
.el-form{
  margin: 40px 8px;
}
</style>
